<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>{{ username }}</h4>
    <h4>{{ password }}</h4>
    <!-- v-model用在html标签上 -->
    <!-- <input type="text" v-model="username"> -->
    <!-- <input type="text" :value="username" @input="username = (<HTMLInputElement>$event.target).value">  该行是v-model的底层原理,就相当于上一行  -->

    <!-- v-model用在组件标签上 -->
    <!-- <AtguiguInput v-model="username"/> -->
    <!-- <AtguiguInput 
      :modelValue="username"   //数据到页面
      @update:modelValue="username = $event"  //绑定事件,事件名为modelValue
    /> -->

    <!-- 修改modelValue -->
    <AtguiguInput v-model:ming="username" v-model:mima="password" />
  </div>
</template>

<script setup lang="ts" name="Father">
  import { ref } from "vue";
  import AtguiguInput from "./AtguiguInput.vue";
  // 数据
  let username = ref("zhansgan");
  let password = ref("123456");
</script>

<style scoped>
  .father {
    padding: 20px;
    background-color: rgb(165, 164, 164);
    border-radius: 10px;
  }
</style>
